<div class="grid">
    <div class="col-12">
        <div class="card">
            <div class="card-w-title">
                <h5 style="font-weight: 900">村庄地址管理</h5>
            </div>
            <p-toolbar>
                <div
                    class="p-toolbar-group-left flex flex-wrap formgroup-inline"
                ></div>

                <div class="p-toolbar-group-right formgroup-inline">
                    <div class="field">
                        <button
                            pButton
                            type="button"
                            label="新增村庄"
                            icon="pi pi-plus"
                            class="mr-2"
                            (click)="openDialog(false)"
                        ></button>
                    </div>
                </div>
            </p-toolbar>
        </div>
    </div>
    <div class="col-12">
        <div class="card" style="min-height: 625px">
            <p-table
                #dt1
                [value]="villageList"
                [rowHover]="true"
                [rows]="10"
                [paginator]="true"
                [rowsPerPageOptions]="[10, 25, 50]"
                scrollDirection="both"
                [scrollable]="true"
                styleClass="p-datatable-striped"
                responsiveLayout="scroll"
            >
                <ng-template pTemplate="header">
                    <tr>
                        <th width="15%">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                村庄名
                            </div>
                        </th>
                        <th width="15%">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                所属乡镇
                            </div>
                        </th>
                        <th width="15%">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                所属区县
                            </div>
                        </th>
                        <th width="15%">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                所属城市
                            </div>
                        </th>
                        <th width="20%">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                详细地址
                            </div>
                        </th>
                        <th width="20%">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                操作
                            </div>
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-item>
                    <tr>
                        <td width="15%">
                            {{ item.village }}
                        </td>
                        <td width="15%">
                            {{ item.town }}
                        </td>
                        <td width="15%">
                            {{ item.district }}
                        </td>
                        <td width="15%">
                            {{ item.city }}
                        </td>
                        <td width="20%">
                            {{ item.address }}
                        </td>
                        <td
                            width="20%"
                            style="text-align: center"
                            alignFrozen="right"
                        >
                            <button
                                pButton
                                pRipple
                                type="button"
                                label="编辑"
                                class="p-button-secondary"
                                style="margin-left: 20px"
                                (click)="openDialog(true, item)"
                            ></button>
                            <button
                                pButton
                                pRipple
                                type="button"
                                label="删除"
                                class="p-button-danger"
                                style="margin-left: 20px"
                                (click)="delete(item)"
                            ></button>
                        </td>
                    </tr>
                </ng-template>
            </p-table>
        </div>
    </div>
</div>
<p-dialog
    [header]="editTag ? '修改城市' : '新增城市'"
    [(visible)]="display"
    [modal]="true"
    [style]="{ width: '500px', height: '500px' }"
    [draggable]="false"
    [resizable]="false"
>
    <div class="field grid">
        <label for="remark" class="col-fixed w-9rem"
            ><span style="color: red">*</span>乡镇名</label
        >
        <div class="col">
            <!--input
                type="text"
                pInputText
                label="remark"
                [(ngModel)]="addForm.name"
            /-->
            <!--p-dropdown
                [options]="districtList"
                [(ngModel)]="addForm.zoneId"
                optionLabel="district"
                optionValue="zoneId"
                placeholder="选择区县"
            ></p-dropdown-->
            <p-cascadeSelect
                [options]="townList"
                optionLabel="name"
                optionGroupLabel="name"
                [optionGroupChildren]="['children','children']"
                [(ngModel)]="addForm.zoneId"
                placeholder="选择区县"
            ></p-cascadeSelect>
        </div>
    </div>
    <div class="field grid">
        <label for="remark" class="col-fixed w-9rem"
            ><span style="color: red">*</span>村庄名</label
        >
        <div class="col">
            <input
                type="text"
                pInputText
                label="remark"
                [(ngModel)]="addForm.name"
            />
            <!--p-dropdown
                [options]="cityList"
                [(ngModel)]="addForm.zoneId"
                optionLabel="city"
                optionValue="zoneId"
                placeholder="选择城市"
            ></p-dropdown-->
        </div>
    </div>
    <div class="field grid">
        <label for="remark" class="col-fixed w-9rem"
            ><span style="color: red">*</span>详细地址</label
        >
        <div class="col">
            <input
                type="text"
                pInputText
                label="remark"
                [(ngModel)]="addForm.addr"
            />
            <!--p-dropdown
                [options]="cityList"
                [(ngModel)]="addForm.zoneId"
                optionLabel="city"
                optionValue="zoneId"
                placeholder="选择城市"
            ></p-dropdown-->
        </div>
    </div>
    <ng-template pTemplate="footer">
        <p-button
            (click)="submit()"
            label="确认"
            styleClass="p-button-text"
        ></p-button>
        <p-button
            (click)="display = false"
            label="取消"
            styleClass="p-button-text"
        ></p-button>
    </ng-template>
</p-dialog>
<p-confirmDialog [style]="{ width: '450px' }"></p-confirmDialog>
<p-toast></p-toast>
